﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <script>
            if(!location.hash.replace('#', '').length) {
                location.href = location.href.split('#')[0] + '#' + (Math.random() * 100).toString().replace('.', '');
                location.reload();
            }
        </script>

        <title>WebRTC Text Chat / Data Sharing | Muaz Khan</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <link rel="author" type="text/html" href="https://plus.google.com/100325991024054712503">
        <meta name="author" content="Muaz Khan">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <script>
            var hash = window.location.hash.replace('#', '');
            if (!hash.length) location.href = location.href + '#text-chat-' + ((Math.random() * new Date().getTime()).toString(36).toLowerCase().replace( /\./g , '-'));
        </script>
        <link type="text/css" href="https://fonts.googleapis.com/css?family=Inconsolata" />
        <style>
            html { background: #eee; }

            body {
                font-family: "Inconsolata", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
                font-size: 1.2em;
                line-height: 1.2em;
                margin: 0;
            }

            body {
                background: #fff;
                border: 1px solid;
                border-color: #ddd #aaa #aaa #ddd;
                border-radius: 5px;
                margin: .5em auto 0 auto;
                padding: .8em;
                padding-top: 0;
            }

            h1, h2 {
                border-bottom: 1px solid black;
                display: inline;
                font-weight: normal;
                line-height: 36px;
                padding: 0 0 3px 0;
            }

            h1 {
                background: rgb(238, 238, 238);
                border-bottom-width: 2px;
                display: block;
                margin-top: 0;
                padding: .3em;
                text-align: center;
            }

            :-moz-any-link:focus {
                border: 0;
                color: #000;
            }

            ::selection { background: #ccc; }

            ::-moz-selection { background: #ccc; }

            button {
                -moz-border-radius: 3px;
                -moz-transition: none;
                -webkit-transition: none;
                background: #0370ea;
                background: -moz-linear-gradient(top, #008dfd 0, #0370ea 100%);
                background: -webkit-linear-gradient(top, #008dfd 0, #0370ea 100%);
                border: 1px solid #076bd2;
                border-radius: 3px;
                color: #fff;
                display: inline-block;
                font-family: inherit;
                font-size: .8em;
                line-height: 1.3;
                padding: 5px 12px;
                text-align: center;
                text-shadow: 1px 1px 1px #076bd2;
            }

            button:hover { background: rgb(9, 147, 240); }

            button:active { background: rgb(10, 118, 190); }

            button[disabled] {
                background: none;
                border: 1px solid rgb(187, 181, 181);
                color: gray;
                text-shadow: none;
            }

            footer { text-align: center; }

            code {
                color: rgb(204, 14, 14);
                font-family: inherit;
            }

            pre {
                border-left: 2px solid red;
                margin-left: 2em;
                padding-left: 1em;
            }

            input { font-size: 2em; }

            #chat-table blockquote {
                border: 1px dotted gray;
                margin: 1em 5em;
                padding: 1em 2em;
            }

            #chat-table blockquote hr {
                border: 0;
                border-top: 1px dotted #BBA9A9;
                margin: 1em -2em;
            }

            .user-id {
                border-right: 1px solid gray;
                float: left;
                height: 1em;
                margin: 0 2em;
                overflow: hidden;
                padding: 0 1em;
                text-align: right;
                width: 3%;
            }

            .message {
                border-bottom: 1px solid gray;
                margin-left: 6em;
            }
        </style>
        <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
        <script src="https://www.webrtc-experiment.com/socket.io.js"> </script>
        <script src="https://www.webrtc-experiment.com/data-connection.js"> </script>
    </head>
    <body>
        <h1>
            WebRTC Text Chat / Data Sharing / <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/text-chat"
                                                 target="_blank">Source Code</a>
        </h1>
        <p>
                <a href="https://www.webrtc-experiment.com/">HOME</a>
                <span> &copy; </span>
                <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a>
                    
                .
                <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a>
                    
                .
                <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a>
                    
                .
                <a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a>
                    
                .
                <a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
            </p>
        <section class="plusone-gplus">
            <div class="g-plusone" data-href="https://www.webrtc-experiment.com/"></div>
        </section>
        <section>
            <h2>Setup a new connection:</h2>

            <button id="setup-new-connection">Setup New Data Connection</button>
        </section>
        <table style="border-left: 1px solid black; border-right: 1px solid black; width: 100%;">
            <tr>
                <td>
                    <h2 style="display: block; font-size: 1em; text-align: center;">
                        Group Text Chat</h2>
                    <div id="chat-output">
                    </div>
                    <input type="text" id="user-id" style="font-size: 1.2em; margin-right: 0; width: 5em;"
                           placeholder="all" disabled title="Enter user-id to send direct messages.">
                    <input type="text" id="chat-input" style="font-size: 1.2em; margin-left: -.5em; width: 80%;"
                           placeholder="chat message" disabled>
                </td>
            </tr>
        </table>
        <script>
            var roomid = window.location.hash.substr(1);
            var connection = new DataConnection();

        // connection.userid = prompt('Enter your username') || 'Anonymous';

        // on data connection opens
            connection.onopen = function(e) {
                document.getElementById('chat-input').disabled = false;
                useridBox.disabled = false;

                appendDIV('Data connection opened between you and ' + e.userid, e.userid);
            };

        // on text message or data object received
            connection.onmessage = function(message, userid) {
                console.debug(userid, 'says', message);
                appendDIV(message, userid);
            };

        // on data connection error
            connection.onerror = function(e) {
                console.debug('Error in data connection. Target user id', e.userid, 'Error', e);
            };

        // on data connection close
            connection.onclose = function(e) {
                console.debug('Data connection closed. Target user id', e.userid, 'Error', e);
            };

        /* custom signaling gateway
        connection.openSignalingChannel = function(callback) {
        return io.connect().on('message', callback);
        }; 
        */


        // using firebase for signaling
            // connection.firebase = 'signaling';

            var channel = location.href.replace(/\/|:|#|%|\.|\[|\]/g, '');
                var sender = Math.round(Math.random() * 999999999) + 999999999;

                var SIGNALING_SERVER = 'https://socketio-over-nodejs2.herokuapp.com:443/';
                io.connect(SIGNALING_SERVER).emit('new-channel', {
                    channel: channel,
                    sender: sender
                });

                var socket = io.connect(SIGNALING_SERVER + channel);
                socket.on('connect', function () {
                    // setup peer connection & pass socket object over the constructor!
                });

                socket.send = function (message) {
                    socket.emit('message', {
                        sender: sender,
                        data: message
                    });
                };

                connection.openSignalingChannel = function(callback) {
                    return socket.on('message', callback);
                };

        // if someone leaves; just remove his video
            connection.onuserleft = function(userid) {
                appendDIV(userid + ' Left.', userid);
            };

        // check pre-created data connections
            connection.check(roomid);

            document.getElementById('setup-new-connection').onclick = function() {
                // setup new data connection
                connection.setup(roomid);
                this.disabled = true;

                this.parentNode.innerHTML = '<h2><a href="' + location.href + '" target="_blank">Share this link</a></h2>';
            };

            var chatOutput = document.getElementById('chat-output');

            function appendDIV(data, userid) {
                var div = document.createElement('div');
                div.innerHTML = '<section class="user-id" contenteditable title="Use his user-id to send him direct messages or throw out of the room!">' + userid + '</section>'
                    + '<section class="message" contenteditable>' + data + '</section>';

                chatOutput.insertBefore(div, chatOutput.firstChild);
                div.tabIndex = 0;
                div.focus();

                chatInput.focus();
            }

            var chatInput = document.getElementById('chat-input');
            var useridBox = document.getElementById('user-id');
            chatInput.onkeypress = function(e) {
                if (e.keyCode !== 13 || !this.value) return;

                if (useridBox.value.length) {
                    var user = connection.channels[useridBox.value];
                    if (user) user.send(this.value);
                    else return alert('No such user exists.');
                } else connection.send(this.value);

                appendDIV(this.value, 'Me');

                this.value = '';
                this.focus();
            };
        </script>
        <br />
        <br />
        <pre>
&lt;script src="https://www.webrtc-experiment.com/data-connection.js"&gt;&lt;/script&gt;
</pre>
        <pre>
var connection = new DataConnection();

connection.onopen = function(e) { /* e.userid */ };
connection.onmessage = function(message, userid) {};

// share data with all connected users
connection.send(file || data || 'text message');

// share data between two unique users (i.e. direct messages)
connection.channels['user-id'].send(file || data || 'text-message');

// custom signaling gateway
connection.openSignalingChannel = function(callback) {
    return io.connect().on('message', callback);
};

// check existing connections
connection.check('room-name');

document.getElementById('setup-new-connection').onclick = function() {
    connection.setup('room-name');
};
</pre>
        <br />
        <br />
        <section style="border: 1px solid rgb(189, 189, 189); border-radius: .2em; margin: 1em 3em;">
            <h2 id="feedback" style="border-bottom: 1px solid rgb(189, 189, 189); padding: .2em .4em;">Feedback</h2>

            <div>
                <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
            </div>
            <button id="send-message" style="font-size: 1em;">Send Message</button>
        </section>
        <footer>
            <p> <a href="https://www.webrtc-experiment.com/" target="_blank">WebRTC Experiments!</a> © <a href="https://plus.google.com/100325991024054712503" rel="author" target="_blank">Muaz Khan</a>, <span>2013 </span> » <a href="mailto:muazkh@gmail.com" target="_blank">Email</a> » <a href="http://twitter.com/muazkh" target="_blank">@muazkh</a> » <a href="https://github.com/muaz-khan" target="_blank">Github</a></p>
        </footer>
        <script src="https://www.webrtc-experiment.com/commits.js"> </script>
    </body>
</html>
